<!--
 * @Author: zi.yang
 * @Date: 2021-04-12 19:39:00
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-05-01 00:29:41
 * @Description: In User Settings Edit
 * @FilePath: \take-out-food\src\components\goods\index.vue
 -->

<template>
  <div class="goods">
    <div class="menu-wrapper" ref="menuWrapper">
      <ul>
        <li
          v-for="(item, index) in goods"
          :key="index"
          class="menu-item"
          :class="{ current: currentIndex === index }"
          @click="selectMenu(index)"
        >
          <span class="text border-1px">
            <span
              v-show="item.type > 0"
              class="icon"
              :class="classMap[item.type]"
            ></span
            >{{ item.name }}
          </span>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper" ref="foodsWrapper">
      <ul>
        <li
          v-for="(item, index) in goods"
          class="food-list food-list-hook"
          :key="index"
        >
          <h1 class="title">{{ item.name }}</h1>
          <ul>
            <li
              v-for="(food, i) in item.foods"
              class="food-item border-1px"
              :key="i"
            >
              <div class="icon">
                <img width="70" :src="food.icon" alt="" />
              </div>
              <div class="content">
                <h2 class="name">{{ food.name }}</h2>
                <p class="desc">{{ food.description }}</p>
                <div class="extra">
                  <span class="count">月售{{ food.sellCount }}份</span>
                  <span>好评率{{ food.rating }}%</span>
                  <div class="price">
                    <span class="now">￥{{ food.price }}</span>
                    <span class="old" v-show="food.oldPrice"
                      >￥{{ food.oldPrice }}</span
                    >
                  </div>
                  <div class="cartcontrol-wrapper">
                    <cartcontrol :food="food"></cartcontrol>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <shopcart
      v-if="seller"
      :delivery-price="seller.deliveryPrice"
      :min-price="seller.minPrice"
      :select-foods="selectFoods"
    ></shopcart>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
import Shopcart from '@components/shopcart';
import Cartcontrol from '@components/cartcontrol';
export default {
  name: 'Goods',
  data() {
    return {
      seller: null,
      goods: null,
      listHeight: [],
      scrollY: 0,
      classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee'],
    };
  },
  components: {
    Shopcart,
    Cartcontrol,
  },
  mounted() {
    const timer = setInterval(() => {
      this.checkAsyncData(timer);
    }, 150);
  },
  computed: {
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let prevHeight = this.listHeight[i];
        let nextHeight = this.listHeight[i + 1];
        const h = this.scrollY >= prevHeight && this.scrollY < nextHeight;
        if (!nextHeight || h) {
          return i;
        }
      }
      return 0;
    },
    selectFoods() {
      let foods = [];
      this.goods.forEach((good) => {
        good.foods.forEach((food) => {
          if (food.count !== 0) {
            foods.push(food);
          }
        });
      });
      return foods;
    },
  },
  methods: {
    checkAsyncData(timer) {
      const busSeller = this.bus.$data.seller;
      const busGoods = this.bus.$data.goods;
      if (busSeller || busGoods) {
        this.seller = busSeller;
        this.goods = busGoods;
        this.$nextTick(() => {
          this._initScroll();
          this._calculateHeight();
        });
        clearInterval(timer);
      }
    },
    selectMenu(index) {
      const foodsWrapper = this.$refs.foodsWrapper;
      let foodList = foodsWrapper.getElementsByClassName('food-list-hook');
      let ele = foodList[index];
      this.foodsScroll.scrollToElement(ele, 300);
    },

    _initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true,
      });
      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        probeType: 3,
        click: true,
      });

      this.foodsScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
      });
    },
    _calculateHeight() {
      const foodsWrapper = this.$refs.foodsWrapper;
      let foodList = foodsWrapper.getElementsByClassName('food-list-hook');
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@styles/mixin.styl';
.goods
  display flex
  position absolute
  top 174px
  bottom 46px
  width 100%
  overflow hidden
  .menu-wrapper
    flex 0 0 80px
    width 80px
    background #f3f5f7
    .menu-item
      display table
      height 54px
      width 56px
      padding 0 12px
      line-height 14px
      &.current
        position relative
        z-index 10
        margin-top -1px
        background #fff
        font-weight 700
        .text
          border-none()
      .icon
        display inline-block
        vertical-align top
        margin 0 !important
        width 12px
        height 12px
        margin-right 2px
        background-size 12px 12px
        background-repeat no-repeat
        &.decrease
          bg-image('~@images/goods/decrease_3')
        &.discount
          bg-image('~@images/goods/discount_3')
        &.guarantee
          bg-image('~@images/goods/guarantee_3')
        &.invoice
          bg-image('~@images/goods/invoice_3')
        &.special
          bg-image('~@images/goods/special_3')
      .text
        display table-cell
        width 56px
        vertical-align middle
        border-1px(rgba(7,17,27,0.1))
        font-size 12px
  .foods-wrapper
    flex 1
    .title
      padding-left 14px
      height 26px
      line-height 26px
      border-left 2px solid #d9dde1
      font-size 12px
      color rgb(147,153,159)
      background #f3f5f7
    .food-item
      display flex
      margin 18px
      padding-bottom 18px
      border-1px(rgba(7,17,27,0.1))
      &:last-child
        border-none()
        margin-bottom 0
      .icon
        flex 0 0 70px
        margin-right 10px
      .content
          flex 1
          .name
            margin 2px 0 8px 0
            height 14px
            line-height 14px
            font-size 14px
            color rgb(7,17,27)
          .desc,.extra
            margin-bottom 8px
            line-height 10px
            font-size 10px
            color rgb(147,153,159)
          .desc
            line-height 12px
            margin-bottom 8px
          .extra
            .count
              margin-right 12px
          .price
            font-weight 700
            line-height 24px
            font-size 0
            .now
              margin-right 8px
              font-size 14px
              color rgb(240,20,20)
            .old
              text-decoration line-through
              font-size 10px
              color rgb(147,153,159)
          .cartcontrol-wrapper
            position absolute
            right 0
            bottom 12px
</style>
